<template>
  <div>
    <div style="overflow-y: scroll;height: 400px">
      <el-form :model="form" :rules="addFormRules" ref="addFormRef" label-position="top">
        <el-row>
          <!-- <el-form-item
            label="规格名称"
            prop="goods_name"
            
          >
           <div style="display:flex;align-items:center;">
            <el-input v-for="(item,index) in ruledata"
            :key="index"
              v-model="item.rule_name"
              placeholder="填写规格名称"
              @blur="k_addrule(item,$event)"
              style="width: 100px;height: 40px;margin-right: 10px"
            ></el-input>
            <i class="el-icon-error" @click="deletrule(index)" v-if="ruledata.length>0"></i>
            <el-button type="primary" style="margin-left:20px;" @click="addRule">添加规格名称</el-button>
          </div>
            
          </el-form-item>-->
          <div style="display:flex;align-items:center;">
            <div
              style="display:flex;align-items:center;"
              v-for="(item,index) in ruledata"
              :key="index"
            >
              <el-input
                v-model="item.rule_name"
                placeholder="填写规格名称"
                @blur="k_addrule(item,$event,index)"
                style="width: 120px;height: 40px;margin-right: 10px"
              ></el-input>
              <i
                class="el-icon-error"
                style="margin-right:20px;"
                @click="deletrule(index)"
                v-if="ruledata.length>0"
              ></i>
            </div>

            <el-button type="primary" @click="addRule">添加规格名称</el-button>
            <!--:style="{'marginLeft':ruledata.length>0?'20px':''}"-->
            <!-- <el-button type="primary" @click="k_addpro(item)" size="small" style="margin-left:30px;">添加</el-button> -->
          </div>
        </el-row>

        <el-form-item
          label
          prop="goods_name"
          v-for="(item,index) in k_ruledata"
          :key="index"
          style="display: flex;margin-top: 20px;align-items: center;"
        >
          <div style="display: flex;flex-direction: row;align-items:center;">
            <span style="margin-right: 10px;margin-top: 5px">{{item.k_rule_name}}:</span>

            <div
              v-if="item.k_rule"
              v-for="(itemto,indexto) in item.k_moreruledata"
              :key="indexto"
              @click="removeItem(index,indexto)"
              style="margin-right: 10px;width: 80px;height: 30px;
                            display: flex;flex-direction: row;
                            color:#578CE5 ;
                            border-radius: 4px;border: 1px solid #578CE5;cursor: pointer;"
            >
              <div
                style="flex: 2;border-right: 1px solid #578CE5;text-align: center;line-height: 30px "
              >{{itemto.rule_name}}</div>
              <div style="flex: 1;text-align: center;line-height: 30px">X</div>
            </div>
          </div> 

          <el-input
            v-model="item.provaluse"
            placeholder="设置属性"
            style="width: 150px;height: 30px;margin-right: 10px"
          ></el-input>
          <el-button type="primary" @click="k_addpro(item)" size="small">添加</el-button>
        </el-form-item>
        <!-- <el-form-item label="商品价格" prop="goods_price">
            <el-input v-model="addForm.goods_price" type="number" min="0"></el-input>
          </el-form-item>
          <el-form-item label="商品重量" prop="goods_weight">
            <el-input v-model="addForm.goods_weight" type="number" min="0"></el-input>
          </el-form-item>
          <el-form-item label="商品数量" prop="goods_number">
            <el-input v-model="addForm.goods_number" type="number" min="0"></el-input>
        </el-form-item>-->
        <el-button
          type="primary"
          style="margin-top: 20px;width: 200px"
          v-if="ruledata.length>0"
          @click="autodata"
        >生成</el-button>
        <div v-if="autodata_rule">
          <el-row style="margin-top: 20px" v-for="(item,index) in autoruledata" :key="index">
            <el-col :span="2" style="text-align: center;margin-right:10px;">
              <div style="margin-top: 10px">{{item.rule_name}}</div>
            </el-col>

            <el-col :span="2" style="margin-right:10px;">
              <el-form-item :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }" label="售价">
                <input type="number" min="0" v-model="item.rule_cost" class="input-base-wrap" />
               
              </el-form-item>
            </el-col>
            <el-col :span="2" style="margin-right:10px;">
              <el-form-item :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }" label="库存">
                <input type="number" min="0" v-model="item.rule_unit" class="input-base-wrap" />
                
              </el-form-item>
            </el-col>
            <!-- <el-col :span="2" style="margin-right:10px;">
              <el-form-item :label-col="{ span: 10 }" :wrapper-col="{ span: 12 }" label="成本价">
                <input type="number" min="0" v-model="item.rule_price" class="input-base-wrap" />
               
              </el-form-item>
            </el-col>

            <el-col :span="2" style="margin-right:10px;">
              <el-form-item :label-col="{ span: 10 }" :wrapper-col="{ span: 12 }" label="划线价">
                <input type="number" min="0" v-model="item.huaxianjia" class="input-base-wrap" />
                
              </el-form-item>
            </el-col>


            <el-col :span="2" style="margin-right:10px;">
              <el-form-item :label-col="{ span: 10 }" :wrapper-col="{ span: 12 }" label="释放积分">
                <input type="number" min="0" v-model="item.sfIntegral" class="input-base-wrap" />
                
              </el-form-item>
            </el-col>

            <el-col :span="2" style="margin-right:10px;">
              <el-form-item :label-col="{ span: 10 }" :wrapper-col="{ span: 12 }" label="释放次数">
                <input type="number" min="0" v-model="item.sfNum" class="input-base-wrap" />
                
              </el-form-item>
            </el-col>

            <el-col :span="2" style="margin-right:10px;">
              <el-form-item :label-col="{ span: 10 }" :wrapper-col="{ span: 12 }" label="邮费">
                <input type="number" min="0" v-model="item.youfei" class="input-base-wrap" />
                
              </el-form-item>
            </el-col> -->

            <el-col :span="4" style="margin-right:10px;">
              <el-form-item :label-col="{ span: 10 }" :wrapper-col="{ span: 12 }" label="图片">
                <el-upload
                  class="avatar-uploader-new"
                  :data="params"
                   :action="qiniuForm.Url"
                  :show-file-list="false"
                  :on-success="uploadSuccessDetails"
                  :before-upload="beforeUpload"
                >
                  <img v-if="item.rule_image" :src="item.rule_image" class="avatar-new"  @click="navUpload(index)"/>
                  <i v-else class="el-icon-plus avatar-uploader-icon-new" @click="navUpload(index)"></i>
                </el-upload>
                <!-- <el-upload
                  class="upload-demo"
                  :action="qiniuForm.Url"
                  :on-change="handleChange"
                  :data="params"
                  :before-upload="beforeUpload"
                  :on-success="uploadSuccessDetails"
                  :on-preview="handlePreview"
                  :file-list="item.fileList"
                  limit="1"
                >
                  <el-button size="small" type="primary" @click="navUpload(index)">点击上传</el-button>

                </el-upload> -->
                <!-- <div v-if="item.rule_image">
                  <el-popover placement="right" width="400" trigger="click">
                    <img :src="item.rule_image" alt style="width:10rem;height:auto;" />

                    <el-button type="primary" size="mini" slot="reference">点击查看</el-button>
                  </el-popover>

                  <el-button
                    size="small"
                    type="primary"
                    @click="removeImage(index)"
                    style="margin-left:20px;"
                  >删除</el-button>
                </div>-->
                <!-- <el-button type="primary" size="small" @click="autodata">上传图片</el-button> -->
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>

    <!-- <a-modal
      :destroyOnClose="true"
      :visible="visible"
      width="1000px"
      :closable="false"
      okText="确定"
      cancelText="取消"
      centered
      :confirmLoading="btnLoading"
      @ok="save"
      @cancel="visible=false"
      title="商品规格添加"
    >
      <div style="overflow-y: scroll;height: 400px">
        <a-form layout="inline" :form="form" style="margin-bottom: 15px">
          <a-row style="display: flex;flex-direction: row">
            <div v-if="rule">
              <span style="margin-right: 10px">规则名称：</span>

              <a-input
                placeholder="填写规格名称"
                v-for="(item,index) in ruledata"
                :key="index"
                v-model="item.rule_name"
                @blur="k_addrule(item,$event)"
                style="width: 150px;height: 40px;margin-right: 10px"
              >
                <a-icon
                  slot="suffix"
                  type="close-circle"
                  @click="deletrule(index)"
                  v-if="item.rule_name!=''"
                />
              </a-input>
            </div>

            <a-button
              type="dashed"
              icon="plus"
              @click="addRule"
              style="width: 150px;height: 40px"
            >添加新规则</a-button>
          </a-row>

          <a-row
            v-for="(item,index) in k_ruledata"
            :key="index"
            style="display: flex;flex-direction: row;margin-top: 20px;align-items: center;"
          >
            <div style="float:left;display: flex;flex-direction: row">
              <span style="margin-right: 10px;margin-top: 5px">{{item.k_rule_name}}:</span>

              <div
                v-if="item.k_rule"
                v-for="(itemto,indexto) in item.k_moreruledata"
                :key="indexto"
                style="margin-right: 10px;width: 80px;height: 30px;
                            display: flex;flex-direction: row;
                            color:#578CE5 ;
                            border-radius: 4px;border: 1px solid #578CE5"
              >
                <div
                  style="flex: 2;border-right: 1px solid #578CE5;text-align: center;line-height: 30px "
                >{{itemto.rule_name}}</div>
                <div style="flex: 1;text-align: center;line-height: 30px">X</div>
              </div>
            </div>

            <a-input
              placeholder="设置属性"
              v-model="item.provaluse"
              style="width: 150px;height: 30px;margin-right: 10px"
            />

            <a-button type="primary" @click="k_addpro(item)" style="width: 60px;height: 30px">添加</a-button>
          </a-row>

    <a-button type="primary" style="margin-top: 20px;width: 600px" @click="autodata">生成</a-button>-->

    <!--自动生成的数据列表-->

    <!-- <div v-if="autodata_rule">
            <a-row style="margin-top: 20px" v-for="(item,index) in autoruledata" :key="index">
              <a-col :span="3" style="text-align: center;">
                <div style="margin-top: 10px">{{item.rule_name}}</div>
              </a-col>

              <a-col :span="4">
                <a-form-item :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }" label="金额">
                  <a-input-number
                    v-decorator="[
          'goods_cost',
          {rules: [{ required: true, message: '请填写金额' }]}
        ]"
                    :min="0"
                  ></a-input-number>
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }" label="库存">
                  <a-input-number
                    v-decorator="[
          'goods_cost',
          {rules: [{ required: true, message: '请填写库存' }]}
        ]"
                    :min="0"
                  ></a-input-number>
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item :label-col="{ span: 10 }" :wrapper-col="{ span: 12 }" label="成本价">
                  <a-input-number
                    v-decorator="[
          'goods_cost',
          {rules: [{ required: true, message: '请填写成本价' }]}
        ]"
                    :min="0"
                  ></a-input-number>
                </a-form-item>
              </a-col>
            </a-row>
          </div>
        </a-form>
    </div>-->
    <!-- </a-modal> -->

    <!-- <a-icon type="plus" style="font-size:20px;color:#3E86ED;margin-left: 10px" @click="toadd"></a-icon> -->
    <!-- 图片预览窗口 -->
    <el-dialog title="图片预览" :visible.sync="previewDialogVisible" width="50%">
      <img :src="previewURL" alt style="width: 100%;" />
    </el-dialog>
  </div>
</template>
 
<script>
export default {
  props: {
    ugro_id: {
      //订单ID
      type: Number,
      default: 0,
    },
    // ruledata: {
    //   type: Array,
    //   default: []
    // },
    qiniuForm: {
      type: Object,
      default: {},
    },
  },
  name: "",
  data() {
    return {
      visible: false,
      btnLoading: false,
      form: "",
      rule: false, //规格
      ruledata: [],
      k_ruledata: [], //一个规格--》对应 多个属性
      autodata_rule: false,
      autoruledata: [], //自动生成的数据

      zum: [],
      params: {
        token: '',
        key: "",
      },
      imageIndex: null,
      previewURL: "",
      previewDialogVisible: false,
    };
  },
  mounted() {},
  methods: {
    //单图预览
    handlePreview(result) {
      // console.log(result);
      // this.previewURL = this.qiniuForm.domain + result.response.key;
      // console.log(this.previewURL);
      // this.previewDialogVisible = true
    },
    navUpload(index) {
      console.log(index, "索引");
      this.imageIndex = index;
    },
    removeImage(index) {
      this.autoruledata[index].rule_image = "";
    },
    beforeUpload(file) {
      this.params.token=this.qiniuForm.token;
      console.log(file);
      this.params.key =new Date().getTime();// file.name
      // this.params.token = this.qiniuForm.token;
      // const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      // const isLt10M = file.size / 1024 / 1024 < 10;

      // if (!isJPG) {
      //   this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
      // }
    },
    // handleAvatarSuccess(res, file) {
    //   console.log(file.raw);
    //   this.addForm.picture = URL.createObjectURL(file.raw);
    // },
    // 每当图片上传成功，都会触发这个函数
    uploadSuccessDetails(res,file) {
      // console.log(result) 
      // 只要图片上传成功，都要 怼出这么一个对象：
      //  { pic: '图片的地址' }
      // 把怼出的对象，push 到this.addForm.pics 中
      // let picUrl = this.qiniuForm.domain + result.key;
      // const obj = { pic: picUrl };
      // console.log(obj, "上传图片的地址");
      // this.autoruledata[this.imageIndex].rule_image = picUrl;
      //this.addForm.picDetails.push(obj)
      // console.log(this.addForm)
      console.log(res,file);
      let obj={...this.autoruledata[this.imageIndex],rule_image:this.qiniuForm.domain+ file.response.key};
      this.autoruledata.splice(this.imageIndex,1,obj);
      // this.autoruledata[this.imageIndex].rule_image = URL.createObjectURL(file.raw);
      // console.log(this.autoruledata);
    },
    removeItem(indexOne, indexTwo) {
      console.log(this.k_ruledata[indexOne], indexTwo);
      this.k_ruledata[indexOne].k_moreruledata.splice(indexTwo, 1);
    },
    toadd() {
      //添加规格

      this.visible = true;
      this.rule = false;
      this.autodata_rule = false;

      this.ruledata = []; //暂时
      this.k_ruledata = [];
      this.autoruledata = [];
      this.zum = [];
    },

    //添加规则
    addRule() {
      //添加一个数据
      let ss = { rule_id: "", rule_name: "" };
      this.ruledata.push(ss);

      this.rule = true;
    },

    //删除规则
    deletrule(index) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.ruledata.splice(index, 1);
          //对应删除--相应的属性
          this.k_ruledata.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      // this.$confirm({
      //   content: "确认删除这个规则名称?",
      //   okText: "确定",
      //   title: "提示",
      //   okType: "danger",
      //   centered: true,
      //   cancelText: "取消",
      //   onOk: () => {
      //     this.ruledata.splice(index, 1);
      //     //对应删除--相应的属性
      //     k_ruledata.split(index, 1);
      //   }
      // });this.zum[index].rule_cost = ""; //金额
      this.zum[index].rule_unit = ""; //库存
      this.zum[index].rule_price = ""; //成本价
    },

    k_addrule(item, event, index) {
      if (item.rule_name) {
        let ss = {
          k_rule_id: item.rule_id,
          k_rule_name: item.rule_name,
          k_rule: false,
          k_provaluse: "", //属性
          k_moreruledata: [],
        };
        console.log(this.k_ruledata);
        for (let i = 0; i < this.k_ruledata.length; i++) {
          if (item.rule_name == this.k_ruledata[i].k_rule_name) {
            console.log(999999);
            return;
          }
        }
        // this.k_ruledata.forEach(oneitem=>{
        //   if(item.rule_name == item.rule_name){
        //     console.log(999999);
        //     return;
        //   }
        // })
        console.log(789);
        this.k_ruledata.push(ss);
        // if (this.k_ruledata.length == 0) {
        //   this.k_ruledata.push(ss);
        // } else {
        //   console.log(item.rule_name,this.k_ruledata)
        //   if (item.rule_name != this.k_ruledata[index].k_rule_name) {
        //     this.k_ruledata.push(ss);
        //   }
        // }
      }
    },

    k_addpro(item) {
      //添加属性

      let ss = { rule_id: "", rule_name: item.provaluse };
      item.k_moreruledata.push(ss);
      item.k_rule = true;
      //添加完成后
      item.provaluse = "";
    },
    autodata() {
      console.log(this.$parent);

      //自动生成

      //autoruledata

      if (this.k_ruledata.length < 0) {
        this.$message.info("请先添加");
        return;
      }

      this.zum = [];
      console.log(this.k_ruledata);
      for (let index in this.k_ruledata) {
        //循环的次数
        // let dataList = [];
        //   this.k_ruledata[index].k_moreruledata.forEach(twoItem => {
        //     let obj = {
        //       title: this.k_ruledata[index].k_rule_name,
        //       content: twoItem.rule_name
        //     };
        //     dataList.push(obj);
        //   });
        this.getDate(this.zum, this.k_ruledata[index]);
      }

      for (let index in this.zum) {
        this.zum[index].rule_id = "";
        this.zum[index].rule_cost = ""; //金额
        this.zum[index].rule_unit = ""; //库存
        // this.zum[index].rule_price = ""; //成本价
        // this.zum[index].huaxianjia = "";
        // this.zum[index].sfNum = "";
        // this.zum[index].sfIntegral = "";
        // this.zum[index].youfei = "";
        this.zum[index].rule_image = ""; //
      }
      this.autoruledata = this.zum;

      console.log(this.autoruledata);

      this.autodata_rule = true;
    },

    getDate(zum, first) {
      //公共存的集合  第一个集合
      console.log(this.zum.length, first, "长度");
      if (zum.length != 0) {
        let item = first.k_moreruledata;
        let zumto = [];

        for (let index in zum) {
          for (let to in item) {
            let ss = {};
            let dataList = [];
            // console.log(item);
            console.log(zum[index].rule_name.split("/"));
            zum[index].rule_name.split("/").forEach((item) => {
              let obj = {
                title: item.split(":")[0],
                content: item.split(":")[1],
              };
              dataList.push(obj);
            });
            let obj1 = {
              title: first.k_rule_name,
              content: item[to].rule_name,
            };
            dataList.push(obj1);
            // first.k_moreruledata.forEach(twoItem => {
            //   console.log(twoItem);
            //   let obj = {
            //     title: first.k_rule_name,
            //     content: twoItem.rule_name
            //   };
            //   dataList.push(obj);
            // });
            ss.describe = dataList;
            ss.rule_name =
              zum[index].rule_name +
              "/" +
              first.k_rule_name +
              ":" +
              item[to].rule_name;

            zumto.push(ss);
          }
        }

        // zumto.forEach(item => {
        //   let dataList = [];
        //   console.log(item);
        //   first.k_moreruledata.forEach(twoItem => {
        //     console.log(twoItem);
        //     let obj = {
        //       title: first.k_rule_name,
        //       content: twoItem.rule_name
        //     };
        //     dataList.push(obj);
        //   });
        //   item.describe = dataList;
        // });
        this.zum = zumto;
      } else {
        let item = first.k_moreruledata;

        for (let index in item) {
          let ss = {};

          ss.rule_name = first.k_rule_name + ":" + item[index].rule_name;
          zum.push(ss);
        }
        zum.forEach((item) => {
          // let dataList = [];

          let dataList = [
            {
              title: item.rule_name.split(":")[0],
              content: item.rule_name.split(":")[1],
            },
          ];
          // first.k_moreruledata.forEach(twoItem => {
          //   let obj = {
          //     title: first.k_rule_name,
          //     content: twoItem.rule_name
          //   };
          //   dataList.push(obj);
          // });
          item.describe = dataList;
        });
        this.zum = zum;
      }
    },

    save() {},
  },
};
</script>
 

<style lang="less" scope>
.input-base-wrap {
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  width: 100%;
}
.avatar-uploader-new .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 1px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader-new .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon-new {
  font-size: 28px;
  color: #8c939d;
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 4px;
}
.avatar-new {
  width: 48px;
  height: 48px;
  display: block;
}
</style>